<template>
	<div id="ordersInfo">
		<div id="ordersInfo-header">
			<div style="min-width:23%;">
				<p style="font-size: 14px;font-weight: 600;"><i class="el-icon-notebook-1"
						style="color: blue;font-size: 20px;margin-right: 5px;"></i>我的订单详细</p>
			</div>
			<div id="ordersInfo-header2">
				<div>
					<el-select v-model="data.status.pay" placeholder="付款">
						<el-option v-for="i in data.payStatus" :key="i.v" :label="i.l" :value="i.v">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-select v-model="data.status.ship" placeholder="发货">
						<el-option v-for="i in data.shipStatus" :key="i.v" :label="i.l" :value="i.v">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-select v-model="data.status.tcreate" placeholder="下单日期">
						<el-option v-for="i in data.tcreate" :key="i.v" :label="i.l" :value="i.v">
						</el-option>
					</el-select>
				</div>
				<div>
					<el-button size="small" type="primary" icon="el-icon-search" @click="getOrder"> 查询 </el-button>
				</div>
			</div>
		</div>
		<br>
		<el-table :data="data.orders" border highlight-current-row style="width: 100%;">
			<el-table-column type="expand">
				<template v-slot:default="props">
					<table class="orderItemInfo">
						<tr v-if="props.row.shipStatus !== 0">
							<td> </td>
							<td style="padding: 8px;">
								<h4 style="display: inline;">承运: </h4>
								<span>{{ props.row.shipper }}</span>
							</td>
							<td colspan="2" style="padding: 8px;">
								<h4 style="display: inline;">发货时间: </h4>
								<span>{{ props.row.tship }}</span>
							</td>
						</tr>
						<tr class="tr-td" v-for="i in props.row.orderItems">
							<td>
								<img :src="pic(i.book.pic)" alt="" style="width: 50px;margin:0px 20px;">
							</td>
							<td>
								<h4 style="display: inline;">名称:</h4>
								<span>{{ i.book.name }}</span>
							</td>
							<td>
								<h4 style="display: inline;">数量:</h4>
								<span>{{ i.num }}</span>
							</td>
							<td>
								<h4 style="display: inline;">单价:</h4>
								<span>{{ i.price }}</span>
							</td>
						</tr>
					</table>
				</template>
			</el-table-column>
			<el-table-column prop="ordid" label="订单号"></el-table-column>
			<el-table-column prop="ship2name" label="收货人" min-width="100px"></el-table-column>
			<el-table-column prop="ship2addr" label="收货地址" min-width="58px"></el-table-column>
			<el-table-column prop="ship2phone" label="电话"></el-table-column>
			<el-table-column prop="shipno" label="发货单号"></el-table-column>
			<el-table-column prop="tcreate" label="下单时间"></el-table-column>
			<el-table-column prop="amount" label="总价"></el-table-column>
			<el-table-column label="付款">
				<template v-slot:default="scope">
					<el-button v-show="scope.row.payStatus === 0" type="text" size="medium"
						@click="gifMoney(scope.row.ordid)"><span id="orderInfoSpan">未付</span></el-button>
					<span v-show="scope.row.payStatus === 1" style="font-weight: 800;">已付</span>
				</template>
			</el-table-column>
			<el-table-column label="收货">
				<template v-slot:default="scope">
					<span v-show="scope.row.shipStatus === 0"
						style="color: rgb(230, 162, 60);font-weight: 800;">未发货</span>
					<el-button v-show="scope.row.shipStatus === 1" type="text" size="medium"
						@click="sign(scope.$index, scope.row.ordid)"><span id="orderInfoSpan">待签收</span></el-button>

					<span v-show="scope.row.shipStatus === 2" style="font-weight: 800;">已签收</span>
				</template>
			</el-table-column>
		</el-table>
		<div style="text-align: center;">
			<el-button type="primary" size="default" @click="findPage">显示更多</el-button>
		</div>
	</div>
</template>

<script setup>
	import api from '@/api';
	import pic from '@/api/pic';
	import {
		ElMessage
	} from 'element-plus';
	import router from '../../../router';
	import store from '../../../store';
	import {
		onMounted,
		reactive
	} from 'vue';

	const data = reactive({
		orders: [],
		status: {
			pay: '',
			ship: '',
			tcreate: 7
		},
		payStatus: [{
			v: '',
			l: '-请选择-'
		}, {
			v: 0,
			l: '未付款'
		}, {
			v: 1,
			l: '已付款'
		}],
		shipStatus: [{
			v: '',
			l: '-请选择-'
		}, {
			v: 0,
			l: '未发货'
		}, {
			v: 1,
			l: '已发货'
		}, {
			v: 2,
			l: '已签收'
		}],
		tcreate: [{
			v: '',
			l: '-请选择-'
		}, {
			v: 7,
			l: '7天内'
		}, {
			v: 15,
			l: '15天内'
		}, {
			v: 30,
			l: '30天内'
		}, {
			v: 60,
			l: '60天内'
		}, {
			v: 120,
			l: '120天内'
		}, ]
	})

	const gifMoney = (ordid) => {
		router.push({
		    path: "/info/payment",
		    query: {
		        id: ordid
		    }
		})
	}
	const sign = (index, ordid) => {
		// api.get(`api/order/updateSign/${ordid}`).then((resp) => {
		//     if (resp.data.code == 200) {
		//         api.get(`api/order/findMyOrder/${store.state.orderPage.lines}`).then((resp) => {
		//             data.orders = resp.data.data
		//             console.dir(resp.data.data)
		//         })
		//         Message.success(resp.data.msg)
		//     }
		//     console.dir(resp.data.data)
		// })
	}
	const getOrder = () => {
		let obj = {
			pay: data.status.pay,
			ship: data.status.ship,
			tpay: data.status.tcreate,
			lines: store.state.page.orderPage.lines
		}
		api.postj("api/order/findMyOrder", obj).then((resp) => {
		    data.orders = resp.data.data.orders
		    store.state.page.orderPage.total = resp.data.data.total
		    console.dir(resp.data.data)
		})
	}
	const findPage = () => {
		
		if(store.state.page.orderPage.lines === store.state.page.orderPage.total){
		    ElMessage.warning("没有更多了记录了")
		    return;
		}
		store.state.page.orderPage.lines += 4;
		let lines = store.state.page.orderPage.lines
		let total = store.state.page.orderPage.total
		if(lines > total){
		    store.state.page.orderPage.lines = store.state.page.orderPage.total
		}
		console.log("行数："+ store.state.page.orderPage.lines)
		let obj = { pay: data.status.pay, ship: data.status.ship, tpay: data.status.tcreate, lines: store.state.page.orderPage.lines }
		api.postj("api/order/findMyOrder", obj).then((resp) => {
		    data.orders = resp.data.data.orders
		    store.state.page.orderPage.total = resp.data.data.total
		    console.dir(resp.data.data)
		})
	}

	onMounted(() => {
		//初始化保证值为{curPage:1,lines:4}
		store.state.page.orderPage.lines = 4
		let obj = {
			pay: data.status.pay,
			ship: data.status.ship,
			tpay: data.status.tcreate,
			lines: store.state.page.orderPage.lines
		}
		api.postj("/api/order/findMyOrder", obj).then((resp) => {
			data.orders = resp.data.data.orders
			store.state.page.orderPage.total = resp.data.data.total
			console.dir(resp.data.data)
		})
	})

</script>

<style lang="less">
	#ordersInfo {
		height: 87vh;
		padding-top: 10px;
		padding-left: 12%;
		padding-right: 12%;

		#ordersInfo-header {
			height: 36px;
			line-height: 36px;
			padding-bottom: 5px;
			border-bottom: 2px solid #b3d8ff;
			display: flex;
			justify-content: flex-end;
			font-size: 16px;

			#ordersInfo-header2 {
				display: flex;

				div:nth-child(1),
				div:nth-child(2),
				div:nth-child(3) {
					max-width: 10vw;
					min-width: 100px;
					margin-right: 3px;

					.el-input__inner {
						height: 36px;
					}

				}

				.el-input__inner {
					padding: 10px 15px;
				}
			}
		}

		#orderInfoSpan {
			color: red;
			font-weight: 800;
		}

		#orderInfoSpan:hover {
			border-bottom: 1px solid blue;
		}

		.orderItemInfo {
			margin: 0px 10%;
			width: 80%;
			table-layout: fixed;
			border-collapse: collapse;

			.tr-td {
				td {
					width: 20%;
					padding: 8px;
					text-align: left;
				}

				td:nth-child(2) {
					width: 40%;
				}
			}

		}


	}
</style>